什麼是 flex-basis ?
flex-basis 設定一個 flex item 在 flex container 內的預設寬度（覆蓋 width 的數值），初始值為 auto。

<div class="container">
    <div class="item pink"></div>
    <div class="item olive"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
</div>

<style>
    .container {
      display: flex;
    }

    .item {
      height: 100px;
    }

    .pink {
      background-color: pink;
      width: 50px;
      flex-basis: auto; /* width: 50px */
    }

    .olive {
      background-color: olive;
      width: auto;
      flex-basis: 100px; /* width: 100px */
    }

    .red {
      background-color: red;
      width: 150px;
    }

    .blue {
      background-color: blue;
      width: 200px;
      flex-basis: 100px; /* width: 100px */
    }

    .green {
      background-color: green;
      width: 300px;
      flex-basis: 200px; /* width: 200px; */
    }
</style>

參考資料

深入理解css3中的flex-grow、flex-shrink、flex-basis